let layer = layui.layer;
// 获取文章类别数据
getArticle()
function getArticle() {
    axios.get("/my/article/cates").then(({ data: { data } }) => {
        // 遍历data数组
        let htmlStr = data.map((item) => {
            return `
            <tr>
                <td>${item.name}</td>
                <td>${item.alias}</td>
            <td>
              <button type="button" class="layui-btn layui-btn-xs btn_edit" data-id="${item.Id}">编辑</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-danger btn_delete" data-id="${item.Id}">删除</button>
            </td>
          </tr>
        `
        }).join('')

        $('#tbody').html(htmlStr)
    })
}

// 点击添加分类按钮，显示弹层 
let addFormStr = `<form id="addForm" class="layui-form">
                        <!-- 第一行 分类名称 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                            class="layui-input">
                        </div>
                    </div>
                    <!-- 第二行 分类别名  -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类别名</label>
                        <div class="layui-input-block">
                            <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                            class="layui-input">
                        </div>
                    </div>
                    <!-- 第三行 按钮 -->
                        <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>`

let indexAddForm;
$('#btnAddCate').click(function () {
    indexAddForm = layer.open({
        type: 1, // 层的类型，1表示页面层
        title: '添加文章类别', // 标题
        area: ['500px', '250px'], // 宽度高度
        content: addFormStr, // 内容
    });
});

// 确认添加分类
// 事件委托给form注册事件
// (触发表单的submit事件，由于表单是动态创建的，所以注册事件要用事件委托)
$("body").on("submit", "#addForm", function (e) {
    e.preventDefault();

    // 获取到表单数据
    let data = $(this).serialize();

    axios.post("/my/article/addcates", data).then(({ data: { status, message } }) => {
        if (status !== 0) {
            // 失败
            return layer.msg(message)
        }
        // 成功
        // 1. 弹框提示
        layer.msg("新增文章分类成功")
        // 2. 关闭弹出层
        layer.close(indexAddForm)
        // 3. 重新发送ajax，获取所有的分类数据
        getArticle()
    });
});


//修改编辑(事件委托，与添加相似)
let editFormStr = `
    <form id="editForm" class="layui-form" lay-filter="editForm">
        <!-- 存id -->
        <div class="layui-form-item layui-hide">
          <label class="layui-form-label">分类名称ID</label>
          <div class="layui-input-block">
            <input type="text" name="Id" required lay-verify="required" placeholder="请输入ID" autocomplete="off"
              class="layui-input">
          </div>
        </div>
    
        <!-- 第一行 分类名称 -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类名称</label>
          <div class="layui-input-block">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第二行 分类别名  -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类别名</label>
          <div class="layui-input-block">
            <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第三行 按钮 -->
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
`
let indexEditForm;
let form = layui.form;
// 注册事件委托
$("#tbody").on("click", ".btn_edit", function (e) {
    e.preventDefault();
    // 接口中需要携带id => 给按钮添加自定义属性
    // 获取到当前编辑按钮上使用自定义属性data-id存储的Id的值，需要获取到，发送ajax请求获取到数据
    let Id = $(this).attr("data-id");

    // 发送请求
    // :id 整个替换成具体的id值
    axios.get("/my/article/cates/" + Id).then(({ data: res }) => {
        // 填充表单数据
        form.val("editForm", res.data);
    });

    // 编辑弹出框
    indexEditForm = layer.open({
        type: 1, // 层的类型，1表示页面层
        title: '修改文章类别', // 标题
        area: ['500px', '250px'], // 宽度高度
        content: editFormStr, // 内容
    });
})
// 更新功能
$("body").on("submit", "#editForm", function (e) {
    e.preventDefault();
    let data = $(this).serialize()
    // console.log(data)
    // 发送ajax请求
    axios.post("/my/article/updatecate", data).then(({ data: { status, message } }) => {
        if (status !== 0) {
            return layer.msg(message)
        }
        // 1. 弹框提示
        layer.msg("更新分类数据成功");

        // 2. 关闭弹出层
        layer.close(indexEditForm);

        // 3. 重新发送ajax获取最新分类数据
        getArticle();
    });
})
// 删除
$("#tbody").on("click", ".btn_delete", function (e) {
    e.preventDefault();
    // 接口中需要携带id => 给按钮添加自定义属性
    // 获取到当前编辑按钮上使用自定义属性data-id存储的Id的值，需要获取到，发送ajax请求获取到数据
    let Id = $(this).attr("data-id");

    // 发送请求
    // :id 整个替换成具体的id值
    axios.get("/my/article/deletecate/" + Id).then(({ data: {status,message} } ) => {
        if (status !== 0) {
            return layer.msg(message)
        }
        // 成功提示
        layer.msg(message)
        // 3. 重新发送ajax获取最新分类数据
        getArticle();
    });
})